html,body{
  height: 100%;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video,*:before,*:after{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*自己添加的 css  reset开始*/
/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
}
/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
    font-weight: bolder;
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp,pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}
/**
 * Add the correct font size in all browsers.
 */

small {
    font-size: 80%;
}
/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
html{
    /** 2. Prevent adjustments of font size after orientation changes in iOS.*/
    line-height: 1;
    -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Render the `main` element consistently in IE.
 */

main {
    display: block;
}
sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}
button,
input,
optgroup,
select,
textarea {
    -webkit-appearance:none;  /*清除ios上默认的样式*/
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
    border:none;
    outline: none;
    padding: 0;
     -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
input:focus,textarea:focus,select:focus { outline: none; } 
textarea{
    resize:none;
}
/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input {
    overflow: visible;/* 1 */
    background-color: transparent;
    padding: 0;
    outline: none;
    margin: 0;
}
/**格式化placeholder文字颜色*/
input::-webkit-input-placeholder
{
  color: #C8C9CD
}

input:-ms-input-placeholder
{
  color: #C8C9CD
}

input:-moz-placeholder
{
  color: #C8C9CD
}

input::placeholder
{
  color: #C8C9CD
}

textarea::-webkit-input-placeholder
{
  color: #C8C9CD
}

textarea:-ms-input-placeholder
{
  color: #C8C9CD
}

textarea:-moz-placeholder
{
  color: #C8C9CD
}

textarea::placeholder
{
  color: #C8C9CD
}


/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
    text-transform: none;
}
/**
 * Add the correct display in IE 10.
 */

.hide,[data-hidden] {
    display: none;
}
/*
 * Add the correct display in all browsers.
 */

summary {
    display: list-item;
}
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
/**
 * Add the correct font size in all browsers.
 */

small {
    font-size: 80%;
}
details {
    display: block;
}
a{
    text-decoration: none;
    color: inherit;
    /**
        * Remove the gray background on active links in IE 10.
    */
    background-color: transparent;
}
hr{
    border: none;
    margin: 0;
    height: 1px;
    background-color: #ddd;
/* Show the overflow in Edge and IE.*/
    overflow: visible;
}
.fl{
    float: left;
}
.fr{
    float: right;
}
.clearFloat:after{
    content: "";
    display: block;
    width:100%;
    height: 0;
    clear:both;
    visibility: hidden;
}
.line-ellipsis{
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
.overhdiden{
    /* 以防使用 .clearFloat 清除浮动时  在ie或者edge浏览器会有多出的空间显示出来  这是一个bug*/
    overflow: hidden;
}
em,i{
    font-style: normal;
}
menu{
    text-align: center;
}
button{
    cursor: pointer;
}
html{
    /*在io设备上 点击的时候  元素会有黑色的背景闪一下   下面就是去除这个东西用的*/
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    height:100%;
}
body{
    /*让字体抗锯齿*/
    font-size: 14px;
    min-height:100%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /*解决iPhone中overflow:scroll;滑动速度慢或者卡的问题*/
    -webkit-overflow-scrolling : touch;
    line-height: 1.5;
    /*各个手机系统有自己的默认字体，一般不支持我们常用字体，例如微软雅黑等；*/
    /*        如无特殊需求，手机端无需定义中文字体，使用系统默认即可。*/
    /*        英文字体和数字字体可使用 Helvetica都支持。*/
    font-family:'Helvetica';
}
/*清除ie默认有的东西：     ::-ms-clear 是文本清除按钮，也就是input右方的叉叉 ::-ms-reveal是密码查看按钮，也就密码框右边的小眼睛。*/
input::-ms-clear{display: none;}
input::-ms-reveal{display: none;}
input::-o-clear{display: none;}
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none; }
/**
    Mac本密码输入框聚焦的时候会显示一个小钥匙的图标，点击可以提示用户保存密码。想要去掉这个的话，添加以下css样式即可：
*/
input::-webkit-credentials-auto-fill-button {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    right: 0;
}

input[type=search]::-webkit-search-cancel-button{
    -webkit-appearance: none;  /*此处去掉默认的小×*/
}
/*Chrome 下去除type ==  "number"  时 的右侧图标*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
    -webkit-appearance: none !important;
    margin: 0;
}
/*火狐 下去除type ==  "number"  时 的右侧图标*/
input[type="number"]{-moz-appearance:textfield;}
/*清除浏览器默认的滚动条*/
/*::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-corner {
    display: none;
}*/
/*CSS3中隐藏滚动条但仍能继续滚动*/
/*::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}*/

/*Chrome浏览器下自动填充的输入框背景会变成黄色，可以用下面CSS声明修成白色*/
input:-webkit-autofill {
    -webkit-box-shadow: inset 0 0 0 1000px transparent; 
    box-shadow:inset 0 0 0 1000px transparent;
} 

/*文字不会被选中:属性选择器性能不好建议使用类名*/
.unselect,[data-unselect]{
    -moz-user-select:none;/*火狐*/
    -webkit-user-select:none;/*webkit浏览器*/
    -ms-user-select:none;/*IE10*/
    -khtml-user-select:none;/*早期浏览器*/
    user-select:none;
}

/*可以阻止用户的交互动作：http://www.webhek.com/post/pointer-events.html；它自己对于事件的处理方式：https://www.hangge.com/blog/cache/detail_1859.html*/
.forbidEvent{ pointer-events: none; }

/*兼容性不是很好：无需设置任何的数值，让元素垂直居中*/
.justVerticalMiddle, .justCenter{  /*此元素为块级元素*/
    writing-mode: vertical-lr;   /* 这里控制垂直居中；但是文字方向不对 */
    text-align: center;
}
.justVerticalMiddle > *,.justCenter > *{
    margin: auto;
	writing-mode: horizontal-tb; /* 把文字方向转过来 */
	text-align: justify;
}

/*兼容性好：无需设置任何的数值，让元素绝对居中*/
.justCenter > *{
   display:block;  /*保证此元素为块级元素*/
   width:100%;
   text-align:center;
}
.justCenter > * > *{
   display:inline-block;
}
/*遇到file元素设置cursor:pointer无效的情况，经测试，在chrome下可以通过设置font-size:0;解决*/
input[type='file']{
    cursor: pointer;
    font-size: 0;
}

/* 阻止在bfc下，上下兄弟元素、父子元素的外边距合并*/
.preventMarginMerge{
    overflow: auto;
}

/* 破碎的图像发生的原因有很多，要么不雅观，要么导致混乱（只是一个空元素）。用这个小小的CSS创建更美观的效果 */
img:before {
    content: "We're sorry, the image below is missing :(";
    display: block;
    margin-bottom: 10px;
}

img:after {
    content: "(url: "attr(src) ")";
    display: block;
    font-size: 12px;
}

/* <a>元素没有文本值，但href属性有一个链接 */
a[href^="http"]:empty::before {
    content: attr(href);
}

/* 文本居中对齐: 让此元素里的所有行内元素居中对齐；所有文本被行内元素包裹*/
.text_vl_middle{
    vertical-align: middle;                     
}
.text_vl_middle *{
    vertical-align: middle;                     
}
/*此元素里的行内元素在不够元素长度时两端对齐：使用时元素里的文本需要用标签包裹、文本字体大小需要单独设置*/
.justy2element {
  font-size: 0;    /* 防止伪元素 :after 多出来高度。 */ 
  text-align: justify;

}
.justy2element > * {
  display: inline-block;
  line-height: 1; 
  font-size:1rem;
}
.justy2element:after {
  content: "";
  width: 100%;
  overflow: hidden;
  display: inline-block;
  line-height: 0;
}
.sonlineblock{
    font-size: 0px;

}
.sonlineblock > *{
    display: inline-block; 
    font-size: 1rem;
}


/*自己添加的 css  reset结束*/

/*建议开始*/
/*1.在重置某个属性值的时候  最好用确切的值  否则在ie上重置的值可能会失效*/
/*例如：重置 border-radius 的时候 我们设置其值为关键字unset  此时在ie中就会失效  其值还是先前设置的值*/
/*2.出自：https://mp.weixin.qq.com/s/YSE2rRtVJ_0TUJwN-pMSrg 的建议 */
    /** 我们在写局部元素样式的时候，完全可以使用em单位 。例如：写按钮的时候。 */
    /** 灵活运用root类型: 我们甚至不需要js就可以完成 移动端适配*/
       /***   root指html元素，然后结合 rem完成移动端适配
            :root {    
                font-size: calc(1vw + 1vh + .5vmin);
            }

            :root {    
                font-size: calc(1vw/7.5);  // 此时设计稿为750px宽；1rem等于1px 
            }
       */
/*建议结束*/
